<template>
  <div class="author-blocks">
    <el-card style="width:800px ;align:middle">
      <ul class="infinite-list" v-infinite-scroll="load" >
      <li class="author-item" v-for="(item,index) in authors" :key="index">
        
        <el-row style=" font-size: 14px">
          <el-col :span="3">
            <!-- <el-image v-if="author_avatars[index]&&author_avatars[index]!==''" :src="author_avatars[index]"></el-image>
            <el-image v-else
                      src="https://img-1304418829.cos.ap-beijing.myqcloud.com/avatar-grey-bg.jpg">
            </el-image> -->
            <img class="img" alr="" src="../assets/images/avatar-grey-bg.jpg" width="80px" height="80px">
          </el-col>
          <el-col :span="12" style="padding-left: 20px; text-align: left; padding-top:30px">
            <div class="author-name" style="cursor:pointer;" @click="gotoSch(item.id)">{{ item.name }}</div>
            <div>{{ item.affiliation_name }}</div>
            <div style="margin-top: 3px; margin-bottom: 3px">
              <span v-for="(area, index) in item.tags" v-bind:key="index">
                <el-link v-if="index<5" style="color: #2d94d4;" @click="toArea(area)">{{ area }}</el-link>
                <!-- <el-link v-else style="color: #2d94d4;" @click="toArea(area)">{{ }}</el-link> -->
                <span  style="margin-left: 4px; margin-right: 4px; color:#2d94d4;" v-if="index!==item.tags.length-1 && index<5">/</span>
              </span>
            </div>
          </el-col>
          <el-col :span="9">
              <div class="button">
            <!-- <el-button type="info" @click="refuse(index)">拒绝</el-button> -->
            <!-- <el-button v-if="this.sendid == item.id" type="success" @click="changeStyle($event,item.id)" class="bindButton">已绑定</el-button> -->
            <el-button type="success" @click="changeStyle($event,item.id)" class="bindButton">绑定</el-button>
            
              </div>
          </el-col>
        </el-row>
        <el-divider v-if="index<authors.length-1"></el-divider>
        
      </li>
      </ul>
    </el-card>
   
  </div>
</template>

<script>
export default {
  name: "AuthorBlocks",
  props: ['authors', 'author_avatars'],
  
  data() {
    return {
      ifcheck:false,
      nowindex:0,
      bindID:'',
      sendid:'',
    }
  },
  // created() {
  //   var but=document.getElementsByTagName('button');
  //     console.log(but)
  //     console.log(but[1].textContent)

  //     for (var i = 0; i < but.length; i++) {
  //       but[i].onclick=function (){
  //         for (var i = 0; i < but.length; i++) {
  //           but[i].style.backgroundColor='';
  //         }
  //         this.style.backgroundColor='pink';
  //         this.textContent="已选择"
          
  //       }
  //     }
  // },
  created(){
    // this.$bus.$on('sendID',this.getsendid)
    // console.log(this.sendid,"sendid")
  },
  methods: {
    getsendid(id2){
      this.sendid=id2;
    },
    changeStyle(e,id){
      if(e.currentTarget.innerText=="已选中")
      {
        this.ifcheck=false
        e.currentTarget.innerText="绑定"
        this.bindID=''
        this.$bus.$emit('getBindID',this.bindID)
        return
      }
      if(this.ifcheck==false)
      {
        e.currentTarget.innerText="已选中"
        this.ifcheck=true
        this.bindID=id
        this.$bus.$emit('getBindID',this.bindID)
      }
      else
      {
        alert("你已经选择了！")
      }
     
            
      
     
    },
    gotoSch(author_id) {
      // alert(author_id)
      let routeUrl = this.$router.resolve({
          path: '/scholar1',
          query: { v: author_id }
        });
        // alert("success")
        window.open(routeUrl .href, "_self");
    },
    toArea(area) {
      let routeUrl = this.$router.resolve({
        path: '/searchRes',
        query: { field: area }
      });
      window.open(routeUrl .href, "_blank");
    },
    refuse(nowindex){
      this.authors.splice(nowindex,1)
    },
    accept(){
      this.changeStyle(this)
      this.authors.splice(nowindex,1)
    }
  }
}
</script>

<style scoped>
.bindButton:hover{

}
.infinite-list{
  overflow-y: auto;
  list-style: none;
  height: 400px;
  width:700px
}
.button{
  position: relative;
  margin: auto;
  margin-top: 5%;
  margin-left:30%
}

.author-name {
  color: #2d94d4;
  cursor: pointer;
  font-size: 14px;
}

.paper-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  font-family: Tahoma,fantasy;
}

.abstract {
  cursor: pointer;
  font-family: Georgia, Lato-Regular,Lato,sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #262625;
}

.citation-count {
  margin-top: 10px;
  font-family: "Trebuchet MS", fantasy;
  font-size: 13px;
  font-weight: 400;
  color: #73716f;
  line-height: 22px;
}

.publish-year {
  color:grey;
  font-size: 14px;
}

.author-affiliation {
  color:grey;
  font-size: 14px;
}
.author-blocks .author-items {
  margin-top: 20px;
  padding: 20px 10px;
}

.author-blocks .author-item >>> .el-image{
  height: 70px;
  width: 70px;
  border-radius: 50%;
}

.author-blocks .author-item >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.author-blocks .author-items .author-name {
  color: black;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.author-blocks .author-items .article-count {
  margin-top: 55px;
}

</style>